<template>
  <div class="page binding-store">
    <DeviceStoreChoice
      ref="DeviceStoreChoice"
      :current="[]"
      :multipleChoice="false"
      v-on:listenToStoreSelect="getSelectStoreValue"
      :hasTotal="false"
      v-if="userInfo.manyShopFlag"
    />
    <div class="scroll-view">
      <customHeader :middleTitle="headerTitle" @leftCallBack="goBack"/>
      <div class="page-body">
        <div class="img-mxs" v-if="type==17"></div>
        <div class="img-mkl" v-if="type==18"></div>
        <div class="img-kxh" v-if="type==20||type==32">
          <div class="img"></div>
        </div>
        <div class="img-mxs2" v-if="type==21"></div>
        <ul class="ul-list">
          <li @click="selectedStore" v-if="userInfo.manyShopFlag">
            <span>{{this.shopName?this.shopName:"选择绑定门店"}}</span>
            <div>
              <i class="zhk-list_rarrow"></i>
            </div>
          </li>
          <li v-if="!userInfo.manyShopFlag">
            <span>{{shopName}}</span>
            <div></div>
          </li>
          <li v-show="type==18&&shopId">
            <inputClear
              class="device-name"
              v-model="deviceName"
              :max="8"
              :maxlength="8"
              placeholder="请输入设备名称"
            />
          </li>
        </ul>
        <div class="tip">
          <span v-if="type==17">每家门店仅支持绑定一台【码先声Ι】设备，已经绑定设备的门店不会显示</span>
        </div>
        <div class="btn-wrap">
          <div class="btn" @click="submit">提交</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import inputClear from "../../components/inputClear/inputClear";
import DeviceStoreChoice from "../../components/StoreChoice/DeviceStoreChoice";
import { Toast, MessageBox } from "mint-ui";
import jsBridge from "../../tools/jsBridge.js";
export default {
  name: "bindingStore",
  data() {
    return {
      storeVisible: false,
      shopId: null,
      shopName: null,
      sn: "",
      type: "",
      deviceName: "",
      userInfo: {
        role: "",
        shopName: "",
        yzShopId: ""
      }
    };
  },
  methods: {
    goBack() {
      if (this.storeVisible) {
        this.storeVisible = false;
        this.$refs.DeviceStoreChoice.back();
      } else {
        if (String(this.$route.query.close) == 'true') {
          jsBridge.closeWindow();
        } else {
          this.$router.back();
        }
      }
    },
    //获取码卡龙名称
    getDeviceName() {
      if (!this.shopId) {
        Toast("未获取到门店id");
        return;
      }
      const url = `app/voice/queryDefaultMklDeviceName.do?shopId=${this.shopId}`;
      this.ajax({
        url: url,
        type: "get",
        controlLoading: true
      })
        .then(res => {
          if (res.success == true) {
            this.deviceName = res.resultObject;
          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {
          callBack && callBack();
        });
    },
    //跳转门店选择
    selectedStore() {
      this.$refs.DeviceStoreChoice.popupShow();
      this.storeVisible = true;
    },
    //门店返回值
    getSelectStoreValue(value, storeName) {
      this.storeVisible = false;
      if (value && value.length > 0) {
        var shopId = value[0].selectKey;
        this.shopId = shopId;
        this.shopName = storeName;

        //码卡龙获取设备名称
        if (this.type == 18) {
          this.getDeviceName();
        }
      }
    },
    //提交
    submit() {
      if (!this.shopId) {
        Toast("请选择门店");
        return;
      }
      if (this.type == 18 && !this.deviceName) {
        Toast("请输入设备名称");
        return;
      }
      const url = `app/voice/bindShop.do?sn=${this.sn}&type=${
        this.type
        }&shopId=${this.shopId}&deviceName=${this.deviceName}`;
      this.ajax({
        url: url,
        type: "get",
        controlLoading: true
      })
        .then(res => {
          if (res.success == true) {
            if (String(this.type) == "20"||String(this.type) == "32") {//快小盒
              MessageBox({
                title: "",
                message: "门店绑定成功",
                showCancelButton: true,
                confirmButtonText: "完成",
                cancelButtonText: "配置Wi-Fi",
                closeOnClickModal: false
              }).then(action => {
                if (action == "confirm") {
                  this.$router.push({ path: "/qrCodeSound/mainSettings", query: { sn: this.sn, type: this.type, shopId: this.shopId } });
                } else {
                  this.$router.push({
                    path: "/qrCodeSound/mainSettings/networkSetting",
                    query: {
                      sn: this.sn,
                      shopId: this.shopId,
                      type: this.type,
                    }
                  });
                }
              });
              return;
            }

            let msg = '门店绑定成功';
            if(this.type==17 || this.type==21 || this.type==37) {
              msg += '</br>可继续指定播报的收款二维码';
            }

            MessageBox({
              title: "",
              message: msg,
              showCancelButton: false,
              confirmButtonText: "完成",
              closeOnClickModal: false
            }).then(action => {
              if (action == "confirm") {
                if (String(this.type) == "18") {
                  if (res.resultObject.openPayStatus === 0) {
                    this.$router.push({ path: "/qrCodeSound/authNone", query: { className: "mkl-unopen", shopId: this.shopId, sn: this.sn, type: this.type } });
                  } else {
                    this.$router.push({ path: "/qrCodeSound/mainSettings", query: { sn: this.sn, type: this.type, shopId: this.shopId } });
                  }
                } else {
                  this.$router.push({ path: "/qrCodeSound/mainSettings", query: { sn: this.sn, type: this.type, shopId: this.shopId } });
                }
              }
            });
          } else {
            MessageBox({
              title: "",
              message: res.msg,
              showCancelButton: false,
              confirmButtonText: "知道了",
              closeOnClickModal: false
            });
          }
        })
        .catch(err => {

        });
    }
  },
  computed: {
    headerTitle() {
     return window.CommonUtil.getMachineNameByType(this.type);
    }
  },
  created() {
    CommonUtil.getUserInfo().then(data => {
      this.userInfo = data;
      //店长（4）角色直接绑定其下的门店信息
      if (!data.manyShopFlag) {
        this.shopId = data.yzShopId;
        this.shopName = data.shopName;

        //码卡龙获取设备名称
        if (this.type == 18) {
          this.getDeviceName();
        }
      }
    });
    this.sn = this.$route.query.sn;
    this.type = this.$route.query.type;
  },
  components: {
    customHeader,
    DeviceStoreChoice,
    inputClear
  }
};
</script>
<style lang="scss" scoped>
@import "qrCodeSound";
</style>
<style lang="scss">
.input-clear-wrap {
  input {
    color: #333;
  }
}
</style>
